<template>
    <div class="tabbar">
        <mt-tabbar v-model="selected" fixed>
            <TabItem id="index">
                <i slot="icon" class="iconfont icon-home"></i>首页
            </TabItem>
            <TabItem id="mine">
                <i slot="icon" class="iconfont icon-user"></i>我的
            </TabItem>
        </mt-tabbar>
    </div>
</template>

<script>
    import { Tabbar, TabItem } from 'mint-ui'
    import '../assets/css/sy-mint-ui.css'

    export default {
        name: 'Tabbar',
        components: {
            MtTabbar: Tabbar,
            TabItem
        },
        props: {
            active:{
                type:String,
                default:''
            }
        },
        data() {
            return {
                selected: this.active
            }
        },
        watch: {
            active:function( val, oldval){
                if (val !== oldval)
                    this.selected=val
            },
            selected:function(val,oldval){
                if (val === oldval)
                    return false
                this.$emit( 'tabChange', val )
                if( val === 'mine' && this.$route.name !== 'Mine' )
                    this.$router.push( '/mine' )
                else if( val === 'index' && this.$route.name !== 'Home' ) {
                    this.$router.push( '/' )
                }
            }
        },
        methods: {},
        created() {
            if( this.$route.name === 'Mine' )
                this.selected='mine'
            else if( this.$route.name === 'Home' ) {
                this.selected='index'
            }
        },
        mounted() {

        },

    }
</script>
<style scoped>


    .iconfont {
        font-weight:500;
        }
</style>
